<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>进度条插件progress.js</title>
  <script src="~/Iptv/research/yunos/TVUtil.js"></script>
  <style>
    body {
      background-color: #2C2C2C;
    }
    .pro, .result {
      width: 200px;
      margin: 100px auto;
    }
    .result {
      text-align: center;
      text-shadow: 0 0 5px #333333;
      color: #FFFFFF;
    }
  </style>
  <script>
    window.onload = function () {
      var result = document.getElementsByClassName('result')[0];
      window.pro = new TVUtil.Progress({
        width: 200,//进度条宽度
        height: 30,//进度条高度
        bgColor: "#3E4E5E",//背景颜色
        proColor: "#009988",//前景颜色
        fontColor: "#FFFFFF",//显示字体颜色
        val: 10,//默认值
        text: "当前进度为#*val*#%",//显示文字信息
        showPresent: true,  //这个控制进度条上面的文字是否显示
        completeCallback: function (val) {
          console.log('已完成');
          result.innerHTML = '已完成';
        },
        changeCallback: function (val) {
          console.log('当前进度为' + val + '%');
          result.innerHTML = '当前进度为' + val + '%';
        }
      });
      document.getElementsByClassName('pro')[0].appendChild(pro.getBody());
      run();
    }
    window.index = 0;
    function run(){
      pro.update(window.index);
      if(window.index == 100){
        window.clearTimeout(timeout);
        return;
      }
      window.index++;
      window.timeout=window.setTimeout("run()",100);
    }
  </script>
</head>
<body>
<div class="pro"></div>
<div class="result"></div>
</body>
</html>
